<!DOCTYPE html>
<html>
<head>
    <title>星级评分 - 1</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="../static/css/style.css">
</head>
<body>
    <nav>
        <ul class="">
            <li><a href="#">1.0版本</a></li>
            <li><a href="index2.html">2.0版本</a></li>
            <li><a href="index3.html">3.0版本</a></li>
            <li><a href="index4.html">4.0版本</a></li>
            <li><a href="index5.htm5">5.0版本</a></li>
        </ul>
    </nav>
    <div id="index1">
        <div class="info">
            <h2>星级评分1.0 —— 最基本的JS写法</h2>
            <p>存在问题：</p>
            <ul>
                <li>1. 含有过多的全局变量num,$rating,$item等，
                    多人共同开发时容易造成变量同名从而被覆盖产生bug
                    （模拟命名空间或者用闭包解决）
                </li>
                <li>2. 事件绑定的写法为每颗星星都绑定了事件，当星星数过多时造成浪费
                </li>
                <li>3. 不能实现代码复用，多个评分要通过复制代码修改后使用</li>
            </ul>
        </div>

        <ul class="rating" id="rating1">
            <!--star-width/height = 26px-->
            <li class="rating-item" title="很差"></li>
            <li class="rating-item" title="较差"></li>
            <li class="rating-item" title="一般"></li>
            <li class="rating-item" title="较好"></li>
            <li class="rating-item" title="很好"></li>
        </ul>
    </div>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="../static/js/index1.js"></script>
</body>
</html>